<template>
  <a-card
    style="width:100%"
    :tab-list="tabListNoTitle"
    :active-tab-key="noTitleKey"
    @tabChange="key => onTabChange(key, 'noTitleKey')"
  >
    <p v-if="noTitleKey === 'shortDesc'">
      <a-card-meta title="I'm kiwipeach" description="90后程序员，擅长使用Python&Java，有一定的前后端全栈开发经验，热爱使用技术解决实际工作与生活问题。">
        <a-avatar
          slot="avatar"
          src="/assets/me_avatar64.png"
          style="width: 64px;height: 64px;"
        />
      </a-card-meta>
    </p>
    <p v-else-if="noTitleKey === 'contact'">
      <a-descriptions size="small" :column="1">
        <a-descriptions-item label="作者">
          kiwipeach
        </a-descriptions-item>
        <a-descriptions-item label="邮箱">
          <a>liuburu@qq.com</a>
        </a-descriptions-item>
        <a-descriptions-item label="微信">
          InteliJBoy
        </a-descriptions-item>
        <a-descriptions-item label="家乡">
          江西·赣州·石城（美丽的白莲之乡）
        </a-descriptions-item>
        <a-descriptions-item label="兴趣">
          撸代码，看电影，玩游戏，睡觉...
        </a-descriptions-item>
      </a-descriptions>
    </p>
  </a-card>
</template>


<script>
  export default {
    name: 'BlogProfile',
    data() {
      return {
        tabListNoTitle: [
          {
            key: 'shortDesc',
            tab: '简介'
          },
          {
            key: 'contact',
            tab: '联系方式'
          }
        ],
        key: 'shortDesc',
        noTitleKey: 'shortDesc'
      }
    },
    methods: {
      onTabChange(key, type) {
        this[type] = key
      }
    }
  }
</script>

<style scoped>

</style>